<template>
  <div class="home">
    <div class="home-header">
      <div class="head-bar" v-if="adminInfo.name">
        <div class="head-bar">
          <i class="el-icon-video-camera" style="font-size: 48px; margin-right: 5px;color:#1e88e5;"></i>
          <span slot="title" style="font-size: 20px; font-weight: bolder;color:#fff;">电影院后台管理系统</span>
        </div>
        <div class="head-bar" style="margin-right:12px;">
          <img
            :src="$server + adminInfo.avatar"
            class="user-avatar"
            width="40px"
            height="40px"
            style="border-radius: 20px;cursor: pointer;"
            @click="handleMenuItemClick('/my_message')"
          />
          <el-dropdown style="margin-left: 12px;cursor: pointer">
            <span class="el-dropdown-link">
              {{ adminInfo.name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleMenuItemClick('/my_message')">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="home-main">
      <div class="home-main-caiDan">
        <el-menu
          :default-active="$route.path"
          :router="true"
          text-color="#fff"
          active-text-color="#fff"
          class="el-menu-vertical"
        >
          <el-menu-item index="/home/welcome">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/home/user_manage">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/home/movie_manage">
            <i class="el-icon-camera-solid"></i>
            <span slot="title">电影管理</span>
          </el-menu-item>
          <el-menu-item index="/home/cinema_manage">
            <i class="el-icon-video-camera-solid"></i>
            <span slot="title">影院管理</span>
          </el-menu-item>
          <el-menu-item index="/home/hall_manage">
            <i class="el-icon-bangzhu"></i>
            <span slot="title">影厅管理</span>
          </el-menu-item>
          <el-menu-item index="/home/movie_schedule">
            <i class="el-icon-s-fold"></i>
            <span slot="title">电影排片</span>
          </el-menu-item>
          <el-menu-item index="/home/comment_manage">
            <i class="el-icon-s-comment"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="/home/order_manage">
            <i class="el-icon-s-ticket"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <my-message style="display: none;" />
      <router-view class="home-main-content" />
    </div>
  </div>
</template>

<script>
import { getAdminInfo } from '../../api'
import myMessage from './children/MySessage.vue'
export default {
  name: 'Home',
  data() {
    return {
      adminInfo: {},
      a: null,
    }
  },
  created() {
    this.loadAdminInfo()
  },
  methods: {
    loadAdminInfo() {
      if (window.sessionStorage.getItem('token')) {
        //如果有就获取管理员的名字
        getAdminInfo().then((res) => {
          if (res.success_code === 200) {
            this.adminInfo = res.data
          }
        })
      } else {
        this.$message.error('请先登录！')
      }
    },
    logout() {
      // 退出时候删除出sessionStorage
      window.sessionStorage.removeItem('token')
      // this.$cookies.remove('admin_id')
      this.$router.push('/login')
      this.$message.success('退出成功！')
    },
    handleMenuItemClick(path) {
      // 点击调到首页的相关管理页面
      this.$router.push('/home' + path)
      this.currentMenuIndex = path
    },
    handleupdate() {
      this.loadAdminInfo()
    },
  },
  components: {
    'my-message': myMessage,
  },
}
</script>

<style lang="stylus">
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  &-header {
    width: 100%;
    height: 64px;
    background: #363D40;

    .head-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }
  }

  &-main {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;

    &-caiDan {
      width: 200px;
      background: #313743;

      ul {
        width: 200px;
        background: #333744;

        li {
          color: #fff;
        }
      }
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .top {
        margin-bottom: 0;
      }

      .block {
        margin-bottom: 16px;
      }
    }
  }
}

.el-dropdown-link {
  color: #fff;
}

.el-menu {
  position: inherit;
}

.el-menu-item.is-active {
  color: #fff;
  background: #409eff !important;
}

.el-menu-item:hover {
  background: #409eff !important;
}

.el-menu-item:hover i {
  color: #fff;
}

.el-dialog__wrapper {
  top: -90px !important;
}

.el-dialog__body {
  padding-bottom: 0;

  .el-form-item {
    padding: 0 !important;
  }
}
</style>